<template>
  <div class="app-container">
    <div>
      <div style="display: flex;justify-content: space-between;">
        <div>{{ detailItem.task && detailItem.task.name }}</div>
        <!-- <div>一键催单</div> -->
      </div>
      <div style="height: 100px">
        <ul class="detail-item">
          <li>
            <div class="label">当前状态</div>
            <div class="value">{{ getStatus(detailItem.status) }}</div>
          </li>
          <li>
            <div class="label">填报周期</div>
            <div v-if="detailItem.task && detailItem.task.frequency === 'monthly'" class="value">{{ detailItem.task.year + '年' + detailItem.task.key + '月' }}</div>
            <div v-if="detailItem.task && detailItem.task.frequency === 'once'" class="value">{{ detailItem.task.key }}</div>
          </li>
          <li>
            <div class="label">填报单位</div>
            <div class="value">{{ detailItem.district && detailItem.district.name }}</div>
          </li>
          <li>
            <div class="label">开始时间</div>
            <div class="value">{{ detailItem.task && detailItem.task.start_date }}</div>
          </li>
          <li>
            <div class="label">结束时间</div>
            <div class="value">{{ detailItem.task && detailItem.task.end_date }}</div>
          </li>
          <li v-if="detailItem.task && detailItem.task.attachment">
            <div class="label">附件</div>
            <a class="value" :href=" detailItem.task.attachment.url" :download="detailItem.task.attachment.name">{{ detailItem.task.attachment.name + '下载' }}</a>
          </li>
          <!-- <li style="width: 200px">
            <div class="label" style="margin-bottom: 10px">任务进度</div>
            <el-progress :percentage="50" />
          </li> -->
        </ul>
      </div>
      <el-divider />
    <!-- {{ detailItem.logs[detailItem.logs.length - 1].operator.name }} -->
    </div>
    <div v-if="detailItem.logs && detailItem.logs.length" style="display: flex;justify-content: space-between;align-items: center">
      <div v-if="detailItem.logs && detailItem.logs.length" class="block">
        <el-avatar :size="50" :src="circleUrl" />
        <div style="margin: 10px 0;font-size: 14px">初审员：{{ detailItem.logs[detailItem.logs.length - 1].operator && detailItem.logs[detailItem.logs.length - 1].operator.name }}</div>
        <div style="color: #acacac;font-size: 12px;">{{ getTimeFormate(detailItem.logs[detailItem.logs.length - 1].updated_at) }}</div>
      </div>
      <div style="width: 80%">
        <div v-if="dateTime != '刚刚'" style="font-size: 12px;color: #acacac;text-align: center;margin-bottom: 20px">{{ '已等待' + getTimeFormater(detailItem.logs[detailItem.logs && detailItem.logs.length - 1].updated_at) }}</div>
        <el-progress :percentage="50" :show-text="false" />
      </div>
      <div class="block">
        <div v-if="detailItem.next_operators">
          <el-avatar :size="50" :src="circleUrl" />
          <div style="width: 120px;margin: 10px 0;font-size: 14px;">
            <span>{{ getStatus(detailItem.status) + '：' }}</span>
            <span v-for="detail in detailItem.next_operators" :key="detail.id" style="font-size: 12px;">{{ detail.name + ' ' }}</span>
          </div>
          <!-- <div style="color: #acacac;font-size: 12px;">{{ getTimeFormate(item.review1_log.updated_at) }}</div> -->
        </div>
      </div>
      <div>
        <el-divider />

      </div>
    </div>
    <div class="univer-container" style="display: flex;justify-content: center;">
      <!-- <div ref="workOrderUniver" class="univer-container" /> -->
      <UniverSheet v-if="univerVisible" id="sheet" ref="univerRef" style="width: 100%" :data="table" />
      <!-- <el-button @click="save">保存</el-button> -->
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="downVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input v-model="commit" type="textarea" maxlength="200" show-word-limit clearable placeholder="请输入驳回原因" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="downVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="type" style="text-align: center;margin-top: 20px;">
      <el-button v-if="type === 'detail'" class="btn" type="primary" @click="handlleExport">导出</el-button>
      <el-button class="btn" type="primary" @click="goBack">返回</el-button>
      <el-button v-if="type === 'init'" class="btn" type="primary" @click="downSubmit()">驳回</el-button>
      <el-button v-if="type === 'repeat'" class="btn" type="primary" @click="repeatDownSubmit()">驳回</el-button>
      <el-button v-if="type === 'init'" v-preventReClick="3000" class="btn" type="primary" @click="initSubmit()">初审通过</el-button>
      <el-button v-if="type === 'repeat'" v-preventReClick="3000" class="btn" type="primary" @click="repeatSubmit()">复审通过</el-button>
    </div>
    <div>
      <el-timeline>
        <el-timeline-item v-for="time in detailItem.logs" :key="time.id" :reverse="true" :timestamp="getTimeFormate(time.created_at)" placement="top">
          <el-card>
            <p>{{ time.operator && time.operator.name }}</p>
            <div style="margin: 10px 0;">
              <span>{{ getoperationType(time.operation_type) }}</span>：
              <span v-if="time.duration">共耗时：{{ timeFormat(time.duration) }}</span>
              <p style="margin-top: 10px">原因备注：{{ time.comment ? time.comment : '无' }}</p>
            </div>
            <p>来自任务：{{ detailItem.task.name }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-divider />
  </div>
</template>
<script>
// import { getXSRFToken } from '@/utils/auth'
import moment from 'moment'
import { getTimeFormater } from '@/utils/index'
import { getWorkOrderDetail, workOrderFirst, workOrderRepeat } from '@/api/workOrder'
import { subTaskExport } from '@/api/common'
import UniverSheet from '@/components/Univer/UniverSheet.vue'
export default {
  components: {
    UniverSheet
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
    // type: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      univerData: {},
      detailItem: {},
      univerVisible: false,
      downVisible: false,
      subStatus: [
        {
          value: '1',
          label: '待处理'
        }, {
          value: '2',
          label: '待初审'
        },
        {
          value: '3',
          label: '初审驳回'
        },
        {
          value: '4',
          label: '待复审'
        },
        {
          value: '5',
          label: '复审驳回'
        },
        {
          value: '6',
          label: '已完结'
        }
      ],
      table: {},
      type: '',
      commit: '',
      dateTime: '',
      operationType: [
        {
          value: 'publish',
          label: '完结任务'
        }, {
          value: 'report',
          label: '填报任务'
        },
        {
          value: 'reject1',
          label: '初审驳回'
        },
        {
          value: 'reject2',
          label: '复审驳回'
        },
        {
          value: 'review1',
          label: '初审通过'
        },
        {
          value: 'review2',
          label: '复审通过'
        }],
      publishStatus: [
        {
          value: '1',
          label: '待处理'
        }, {
          value: '2',
          label: '待初审'
        },
        {
          value: '3',
          label: '初审驳回'
        },
        {
          value: '4',
          label: '待复审'
        },
        {
          value: '5',
          label: '复审驳回'
        },
        {
          value: '6',
          label: '已完结'
        }]
    }
  },
  created() {
    this.getDetail()
    this.type = this.$route.query.type
  },
  methods: {
    goBack() {
      // this.$emit('goBack')
      this.$router.push('/dataFilling/workReview')
      // workReview
    },
    getTimeFormater(time) {
      this.dateTime = getTimeFormater(time)
      return getTimeFormater(time)
    },
    getStatus(status) {
      let label = ''
      this.subStatus.forEach(item => {
        if (item.value == status) {
          label = item.label
        }
      })
      return label
    },
    handleClose() {
      this.downVisible = false
    },
    handleSubmit() {
      if (this.type === 'init') {
        const data = {
          id: this.$route.query.id,
          result: 2,
          comment: this.commit
        }
        workOrderFirst(data).then(res => {
          if (res.status === 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.downVisible = false
            // this.$emit('updateResult')
            this.$router.push('/dataFilling/workReview')
          }
        })
      } else if (this.type === 'repeat') {
        const data = {
          id: this.$route.query.id,
          result: 2,
          comment: this.commit
        }
        workOrderRepeat(data).then(res => {
          if (res.status === 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            // this.$emit('updateResult')
            this.downVisible = false
            this.$router.push('/dataFilling/workReview')
          }
        })
      }
    },
    getoperationType(status) {
      let label = ''
      this.operationType.forEach(item => {
        if (item.value == status) {
          label = item.label
        }
      })
      return label
    },
    exportExcel(data, name) {
      const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = name + '.xlsx'
      a.click()
      window.URL.revokeObjectURL(url)
    },
    handlleExport() {
      subTaskExport({ id: this.$route.query.id }).then(res => {
        this.exportExcel(res, this.detailItem.task.name)
      })
    },
    getDetail() {
      getWorkOrderDetail({ id: this.$route.query.id }).then(res => {
        this.detailItem = res.data
        if (res.data.data) {
          this.table = res.data.data
          this.univerVisible = true
        } else {
          this.table = res.data.report_template_data
          this.univerVisible = true
        }
      })
    },
    getTimeFormate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    timeFormat(time) {
      const days = parseInt(time / 60 / 60 / 24)
      const hours = parseInt(time / 60 / 60 % 24)
      const minutes = parseInt(time / 60 % 60)
      const seconds = parseInt(time % 60)
      return `${days ? days + '天' : ''}${hours ? hours + '小时' : ''}${minutes ? minutes + '分钟' : ''}${seconds ? seconds + '秒' : ''}`
    },
    initUniver() {
      var univer = new window.UniverCore.Univer({
        theme: window.UniverDesign.defaultTheme,
        locale: window.UniverCore.LocaleType.ZH_CN,
        logLevel: window.UniverCore.LogLevel.VERBOSE
      })

      // core plugins
      univer.registerPlugin(window.UniverDocs.UniverDocsPlugin, {
        hasScroll: false
      })
      univer.registerPlugin(window.UniverEngineRender.UniverRenderEnginePlugin)
      univer.registerPlugin(window.UniverUi.UniverUIPlugin, {
        container: this.$refs.workOrderUniver,
        header: false,
        toolbar: false
        // footer: true
      })
      univer.registerPlugin(window.UniverSheets.UniverSheetsPlugin)
      univer.registerPlugin(window.UniverSheetsUi.UniverSheetsUIPlugin)

      // sheet feature plugins
      univer.registerPlugin(window.UniverSheetsNumfmt.UniverSheetsNumfmtPlugin)
      univer.registerPlugin(
        window.UniverEngineFormula.UniverFormulaEnginePlugin
      )
      univer.registerPlugin(
        window.UniverSheetsFormula.UniverSheetsFormulaPlugin
      )

      // create univer sheet instance

      // univer.createUniverSheet(this.table)
      this.univerData = univer.createUniverSheet(this.table)
    },
    initSubmit() {
      const data = {
        id: this.$route.query.id,
        result: 1
      }
      workOrderFirst(data).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          // this.$emit('updateResult')
          this.$router.push('/dataFilling/workReview')
        }
      })
    },
    downSubmit() {
      this.downVisible = true
    },
    repeatDownSubmit() {
      this.downVisible = true
    },
    repeatSubmit() {
      const data = {
        id: this.$route.query.id,
        result: 1
      }
      workOrderRepeat(data).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          // this.$emit('updateResult')
          this.$router.push('/dataFilling/workReview')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.block {
  text-align: center;
  // display: flex;
  // justify-content: center;
}
.btn {
  width: 120px;
  margin-right: 30px;
}
.univer-container {
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 0px;
  // width: 800px;
  // height: 100vh;
  bottom: 0px;
}
.detail-item {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .label {
    color: #acacac;
    font-size: 14px;
  }
  .value {
    font-size: 14px;
    margin-top: 10px;
    // text-align: center;
    // font-size: 30px;
  }
}
</style>
<style >

</style>
